<!-- 成为矿工 -->
<template>

  <div class="pag" >
    <div class="miner-banner">
      <h2>您为普通用户</h2>
      <p>请输入超级节点邀请码来成为矿工</p>
    </div>
    <div class="input-wrap">
      <form autocomplete>
        <input type="text" name="codenode" placeholder="输入超级节点邀请码" v-model="code">
        <button @click.prevent="getSuperNodeInfo">确认</button>
      </form>
    </div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in list">
          <div class="card-wrap">
            <div class="card">
              <div class="card-logo">
                <img :src="item.pic" alt="">
                <p>{{ item.name }}</p>
              </div>
              <div class="card-desc">{{ item.introduction }}</div>
              <div class="card-invite"><p>邀请码：{{item.uid}}</p> <a class="clipboard-btn" :data-clipboard-text="item.uid" @click="$suc('复制成功!')">复制</a></div>
              <div class="card-nodenum">剩余挖矿名额：{{item.remainingNodeNum > 0 ?  item.remainingNodeNum : 0}}个</div>
              <div class="card-resume" v-html="item.des"></div>
              <div class="card-qr clipboard-btn" :data-clipboard-text="item.wechat" @click="$suc('复制成功!')">
                <p>客服微信：{{ item.wechat }}</p>
                <a>复制</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 申请成为矿工弹框 -->
    <cube-popup  type="my-popup"   position="bottom"
                 :maskClosable="true" v-model="popVisible">
      <div class="miner-popup">
        <div class="miner-popup-head">申请成为矿工</div>
        <div class="miner-popup-body">
          <div class="join-resume">
            超级节点 <span>{{nodeInfo.name}}</span> 旗下还有 <span>{{nodeInfo.remainingNum}}</span> 个挖矿名额<br>请如实填写您需要的名额以供超级节点来选择
          </div>
          <input type="number" placeholder="请输入您需要的名额" class="miner-num" min="1" v-model="minerNum">
          <button @click="submit" class="item-next" :disabled="!(minerNum > 0 && nodeInfo.remainingNum > 0)">确认</button>
          <div class="item-tip">
            <i>*</i>加入后挖矿节点数不可大于申请数<br>（后期可以让超级节点再增加）<br>如果填写数目过大占用超级节点资源过多有被拒绝的风险
          </div>
        </div>
      </div>
    </cube-popup>
    <!-- 提示框 -->
    <alert ref="tipPopup">
      <div style="padding: 0 .48rem">{{ tip }}</div>
    </alert>
    <!-- 提示框 -->
    <alert ref="tip2Popup">
      <div style="padding: 0 .48rem">
        您的加入申请已递交给 <span style="font-weight: bold;">{{nodeInfo.name}}</span> 超级节点 管理员，需要通过审核方可加入，在此之前 仍然可以申请加入其他超级节点。
      </div>
    </alert>
  </div>

</template>



<script>
  //import 'swiper/css/swiper.min.css'
  import 'swiper/swiper.scss'
  import Swiper from 'swiper'
  //import data from './data'
  import { getSuperNodeList, getSuperNodeInfo, becomeSuperNodeMiner } from 'api'
  // import { becomeSuperNodeMiner } from 'api/register'
  import alert from 'cpnts/alert.vue'
  export default {
      components: {
          'alert': alert
      },
    data() {
      return {
          tip: '',
          minerNum: null,
          nodeInfo: {},
          popVisible: false,
          code: '',
        list: []
      }
    },
    beforeRouteEnter (to, from, next) {
      next((vm) => {
        vm.resetForm()
      })
    },
      created(){
        //this.generateRandomList()
      },
    mounted(){
        this.getData()
    },
    methods: {
        hideRefPopup(ref){
            this.$refs[ref].hide()
        },
          showTip(msg){
              this.tip = msg
              this.$refs.tipPopup.show()
          },
        confirmJoinHandle(){

        },
        resetForm(){
            this.popVisible = false
            this.code = ''
            this.hideRefPopup('tipPopup')
            this.hideRefPopup('tip2Popup')
        },
        async getSuperNodeInfo(){
            let me = this
            if(!this.code.trim()){
                return  this.$warn('请输入超级节点邀请码')
            }
            if(this.isSubmit){
                return
            }
            this.isSubmit = true
            try {
                let {data} = await getSuperNodeInfo(this.code)
                if(data){
                    this.nodeInfo = data
                    this.popVisible = true
                    this.minerNum = null
                }else {
                    this.$warn('没有该节点信息')
                }

            } catch (e) {
                me.$warn(e.info)
            }
            this.isSubmit = false

        },
        async submit(){
            let me = this
            if(!this.code.trim()){
                return  this.$warn('请输入超级节点邀请码')
            }
          if(this.isSubmit){
            return
          }
            this.isSubmit = true
            try {
                let data = await becomeSuperNodeMiner({
                    code: this.code,
                    nodeNum: this.minerNum
                })
                //me.showTip(data.info)
                this.$refs.tip2Popup.show()
            } catch (e) {
              me.showTip(e.info)
                //me.$warn(e.info)
            }
            this.popVisible = false
            this.isSubmit = false

        },
        renderSwipe(){
            var swipe = new Swiper('.swiper-container', {
                zoomMin: 1,
                zoomMax: 1,
                zoomToggle: false,
                zoom: false,
                loop: true,
                centeredSlides: true, // 选中slide居中显示
                initialSlide: 1, // 默认选中项索引
                slidesPerView: 2, // 自动匹配每次显示的slide个数,loop='auto'模式下，还需要设置loopedSlides
                effect: 'coverflow', //  切换效果-3d
                coverflowEffect: {
                    rotate: 0,
                    stretch: 0,
                    depth: 160,
                    modifier: 1.8,
                    slideShadows: false
                }
            });
        },
        async getData(){
            try {
                let {data} =  await getSuperNodeList()
                this.list = Object.freeze(this.generateRandomList(data))
                // this.$nextTick(()=>{
                //     this.renderSwipe()
                // })
                setTimeout(()=>{
                    this.renderSwipe()
                }, 100)
            }catch (e) {
                this.$warn(e.info)
            }
        },
        generateRandomList(list){
            let l = list.length
            let rv = []
            while (true){
                let index = Math.floor(Math.random()*l)
                if(list[index]){
                    rv.push(list[index])
                    list[index] = null
                }
                if(rv.length == l){
                    break
                }
            }
            return rv
        },
        generateRandomList2(){
            let dt = data
            let {list} = this
            for(let i=0;i<dt.length;i++){
                let items = dt[i]
                let invitecode = items.invitecode
                for(let j=0;j<invitecode.length;j++){
                    list.push(Object.assign({}, items, {
                        title: items.title[j],
                        invitecode: invitecode[j]
                    }))
                }
            }
            let l = list.length
            let rv = []
            while (true){
                let index = Math.floor(Math.random()*l)
                if(list[index]){
                    rv.push(list[index])
                    list[index] = null
                }
                if(rv.length == l){
                    break
                }
            }
            this.list = Object.freeze(rv)
        },
      toastTip (info) {
        this.$warn(info)
      },
    }
  }
</script>





<style lang="scss" scoped>

  .pag {
    background: #F5F5FB;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .miner-banner {
    height: 254px;
    padding: 62px 0 0 64px;
    background: url('~assets/images/token/miner-banner.png') center center / contain no-repeat;
    color:#fff;
    h2 {
      font-size:44px;
      font-weight:600;
      text-shadow:0px 2px 2px rgba(1,95,118,0.5);
      margin-bottom: 27px;
    }
    p {
      font-size:30px;
    }
  }

  .input-wrap {
    width: 650px;
    height: 84px;
    margin: -42px auto 0 auto;
    position: relative;
    form {
      width: 100%;
      height: 100%;
      display: flex;
      input {
        width: calc(100% - 140px);
        height: 100%;
        background:rgba(255,255,255,1);
        border:2px solid rgba(216,224,238,1);
        border-radius:10px 0px 0px 10px;
        padding-left: 25px;
      }
      button {
        width: 140px;
        height:100%;
        background:rgba(44,117,243,1);
        border-radius:0px 10px 10px 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        outline: none;
        appearance: none;
        border: none;
        padding: 0;
        font-size:30px;
        color:rgba(255,255,255,1);
      }
    }
  }

  .swiper-container {
    width: 100%;
    //height: 400px;
    margin: 88px auto;
  }

  .swiper-slide {
    height: auto;
    width: auto;
    background: #fff;
  }

  .card-wrap {
    width:420px;
    height:804px;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 10px 0px rgba(102,102,102,0.3);
    border-radius:14px;
    padding: 10px;
  }

  .card {
    //width:400px;
    height:784px;
    border:2px solid rgba(244,244,244,1);
    border-radius:10px;
    padding: 22px 24px 20px 24px;
  }

  .card-logo {
    text-align: center;
    margin-bottom: 15px;
    img {
      vertical-align: top;
      width:42px;
      height:42px;
      box-shadow:0px 0px 10px 0px rgba(102,102,102,0.3);
      margin: 0 auto 24px auto;
      display: block;
    }
    p {
      font-size:30px;
      font-weight:600;
      color:rgba(29,40,88,1);
    }
  }

  .card-desc {
    text-align: center;
    font-size:20px;
    color:rgba(113,118,140,1);
    //margin-bottom: 25px;
    white-space: nowrap;
    height: 1.31em;
    //overflow: hidden;
  }

  .card-invite {
    width:350px;
    height:48px;
    background:rgba(248,247,247,1);
    border-radius:24px;
    font-size:24px;
    color:rgba(29,40,88,1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    margin: 18px auto 0 auto;
    a {
      color:rgba(18,83,252,1);
    }
  }

  .card-resume {
    font-size:22px;
    color:rgba(113,118,140,1);
    line-height:33px;
    height: 390px;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 13px;
    margin-top: 20px;
  }

  .card-nodenum {
    margin-top: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size:22px;
    color:rgba(29,40,88,1);
    &::before {
      content: '';
      width: 56px;
      height: 2px;
      background: url("~assets/images/node/s-left.png") center center / contain no-repeat;
    }
    &::after {
      content: '';
      width: 56px;
      height: 2px;
      background: url("~assets/images/node/s-right.png") center center / contain no-repeat;
    }
  }

  .card-qr {
    /*width:320px;*/
    /*height:116px;*/
    /*background:rgba(248,247,247,1);*/
    /*border-radius:12px;*/
    min-height:58px;
    border:2px solid rgba(244,244,244,1);
    border-radius:12px;
    margin: 0 auto;
    text-align: center;
    padding-top: 10px;
    p {
      font-size:22px;
      color:rgba(29,40,88,1);
      margin-bottom: 5px;
    }
    a {
      font-size:22px;
      color:rgba(18,83,252,1);
    }
  }


  .miner-popup {
    //height:1000px;
    background:rgba(255,255,255,1);
  }

  .miner-popup-head {
    height: 88px;
    border-bottom: 1px solid #F5F5F5;
    font-size:34px;
    color:rgba(32,44,91,1);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .miner-popup-body {
    padding: 30px;
    color:rgba(32,44,91,1);
  }

  .join-resume {
    font-size:28px;
    line-height:42px;
    text-align: center;
    span {
      color: #5872F1;
    }
  }


  .miner-num {
    width: 100%;
    display: block;
    margin: 30px 0;
    height:84px;
    background:rgba(246,247,248,1);
    border:2px solid rgba(227,227,227,1);
    border-radius:10px;
    text-indent: 22px;
  }

  .item-next {
    display: block;
    width: 100%;
    margin: 30px 0;
    height:84px;
    background:rgba(23,62,143,1);
    border-radius:8px;
    padding: 0;
    border: none;
    outline: none;
    box-shadow: none;
    color: #fff;
    font-size: 34px;
    &:disabled {
      opacity:0.5;
    }
  }


  .item-tip {
    font-size:26px;
    line-height:39px;
    text-align: center;
    i {
      color:rgba(235,50,87,1);
      font-style: normal;
    }
  }


</style>













